import React, { Component } from 'react';
import { forTaskType as selectSingleTaskAnswerStatusForTaskType } from '../../common/SelectSingleTaskAnswerStatus';
import { forTaskType as selectSingleTaskDealStatusForTaskType } from '../../common/SelectSingleTaskDealStatus';
import { Row, Col, Input, Checkbox, Select, Button, Modal, DatePicker, Dropdown, Menu } from 'antd';
import message from '@wanhu/antd-legacy/lib/message'
import { Form, fieldBuilder } from '../../common/form';
import moment from 'moment';
import { closest, hasClass } from '../../../helpers/dom';
import './taskOperateBar.scss';

const Alignment = {
    points: [ 'bl', 'tl' ],
    offset: [ 0, -4 ],
    overflow: {
        adjustX: 0,
        adjustY: 1,
    },
}

const formDef = Form.def({
    answerStatus: fieldBuilder().validator(()=>null),
    messageTemplate: fieldBuilder().validator(()=>null),
    dealStatus: fieldBuilder().validator(()=>null),
    resultStatus: fieldBuilder().validator(()=>null),
    remarks: fieldBuilder().maxLength('500'),
    delayTime: fieldBuilder().validator(()=>null),
});

const Today = moment().hour(23).minute(59).second(59).millisecond(999);

export default class TaskOperateBar extends Component {
    constructor(props){
        super(props)
        this.state={
            isShowFinishBtn:true,
            isShowCloseBtn:true,
            delayBtnText:'延后处理'
        }
    }

    alertError(msg) {
        message.error(msg, 3);
    }

    completeTaskWithFreeze = (freeze) => {
        if (freeze && freeze.key) {
            freeze = freeze.key;
        }
        this.form.validateFields((err, values) => {
            if (!values.answerStatus) {
                this.form.setFields({
                    answerStatus: {
                        value: values.answerStatus,
                        errors: ['请选择接听状态']
                    }
                });
                return;
            }

            const answerStatus = values.answerStatus;
            const r = {
                answerStatus,
                remarks: values.remarks
            };
            if(this.props.messageTemplateData && this.props.messageTemplateData.length) {
                if(!values.messageTemplate) {
                    this.form.setFields({
                        messageTemplate: {
                            value: values.messageTemplate,
                            errors: ['请选择短信发送模板']
                        }
                    });
                    return;
                }
                r.templateId = values.messageTemplate;
            }
            const needDeal = answerStatus.allowDeal;
            if (needDeal){
                if (!values.dealStatus) {
                    this.form.setFields({
                        dealStatus: {
                            value: values.dealStatus,
                            errors: ['请选择处理状态']
                        }
                    });
                    return;
                }
                const dealStatus = values.dealStatus;
                r.dealStatus = dealStatus;
                let fields;
                switch (dealStatus.taskResultType) {
                    case 'choice': {
                        if (!values.resultStatus) {
                            fields = fields || {};
                            fields.resultStatus = {
                                value: values.resultStatus,
                                errors: ['请选择处理结果']
                            };
                        }
                        r.resultStatus = values.resultStatus;
                    } break;
                    case 'delay': {
                        const delayTime = this.props.delayTime || values.delayTime;
                        if (!values.resultStatus) {
                            fields = fields || {};
                            fields.resultStatus = {
                                value: values.resultStatus,
                                errors: ['请选择延期原因']
                            };
                        }
                        if (!delayTime) {
                            fields = fields || {};
                            fields.delayTime = {
                                value: values.delayTime,
                                errors: ['请选择延期时间']
                            };
                        }
                        r.resultStatus = values.resultStatus;
                        r.delayTime = delayTime;
                    } break;
                    case 'delayNoReason': {
                        const delayTime = this.props.delayTime || values.delayTime;
                        if (!delayTime) {
                            fields = fields || {};
                            fields.delayTime = {
                                value: values.delayTime,
                                errors: ['请选择延期时间']
                            };
                        }
                        r.delayTime = delayTime;
                    } break;
                    default:
                }
                const needRemarks = dealStatus.needRemarks && (dealStatus.needRemarks === true || dealStatus.needRemarks === r.resultStatus);
                if (needRemarks && !values.remarks) {
                    fields = fields || {};
                    fields.remarks = {
                        value: values.remarks,
                        errors: ['请填写备注信息']
                    };
                }
                if (fields) {
                    this.form.setFields(fields);
                    return;
                }
            }
            this.props.onProcessTask({
                ...r,
                taskStatus: 2,
                freeze: freeze
            });
        });
    }

    completeTask = () => {
        this.completeTaskWithFreeze(undefined);
    }

    closeTask = () => {
        this.form.validateFields((err, values) => {
            const fields = {};
            let anyError;
            if (!values.remarks) {
                fields.remarks = {
                    value: values.remarks,
                    errors: ['请填写关闭任务原因']
                };
                anyError = true;
            }
            if (anyError) {
                this.form.setFields(fields);
                return;
            }
            Modal.confirm({
                title: '是否确认关闭任务，关闭后不可修改',
                onOk:() => {
                    this.props.onProcessTask({
                        ...values,
                        taskStatus: 4,
                    });
                },
                onCancel(){

                }
            });
        });
    }

    delayTask = () => {
        this.form.validateFields((err, values) => {
            const answerStatus = values.answerStatus;
            const r = {
                answerStatus,
                remarks: values.remarks
            };
            if (answerStatus) {
                const needDeal = answerStatus.allowDeal;
                if (needDeal){
                    const dealStatus = values.dealStatus;
                    r.dealStatus = dealStatus;
                    if (dealStatus) {
                        if (dealStatus.taskResultType === 'choice') {
                            r.resultStatus = values.resultStatus;
                        } else if (dealStatus.taskResultType === 'delay') {
                            const delayTime = this.props.delayTime || values.delayTime;
                            r.resultStatus = values.resultStatus;
                            r.delayTime = delayTime;
                        } else if (dealStatus.taskResultType === 'delayNoReason') {
                            const delayTime = this.props.delayTime || values.delayTime;
                            r.delayTime = delayTime;
                        }
                    }
                }
            }
            this.props.onProcessTask({
                ...r,
                taskStatus: 1,
            });
        });
    }

    selectMessageTemplate = ()=>{
        console.log('selectMessageTemplate')
    }

    changeAnswerStatus = val => {
        // 恢复成初始值
        this.setState({
            isShowFinishBtn:true,
            isShowCloseBtn:true,
            delayBtnText:'延后处理'
        })
        // 电话接听状态，
        /**
         * {"name":"本人接听","id":"ff6e0f2e3b9b4c07aad0457bd959131c","value":"1"},
         * {"name":"亲友接听","id":"1b1abab08e284115a331391cd50feb22","value":"2"},
         * {"name":"无人接听","id":"41de2fbdbfe14d3b95d032af5f5b2372","value":"3"},
         * {"name":"直接挂断","id":"f33694dbb52844c3ba832c65537e4448","value":"4"},
         * {"name":"关机","id":"eb495f5eec1740dc95081d2f9d0e5c89","value":"5"},
         * {"name":"通话中","id":"04e3b64b4dd540f8a588bb24ed02e9b4","value":"6"},
         * {"name":"停机","id":"b336a9b474cb4f0ab2fe66959930a7d7","value":"7"},
         * {"name":"错误号码(非本人或亲友)","id":"f56224e413a6434db0731a936262118f","value":"8"},
         * {"name":"空号","id":"e08c26f96e5841ab92b4f8b840a07d26","value":"9"},
         *
         * "dealStatus":[{"name":"同意","id":"1"},{"name":"延期","id":"2","taskResult":[{"name":"门慢尚未转","id":"d672723011834a918ba964026723eb2b","value":"2"},{"name":"门慢还不能转","id":"732abadc037542cb892f09483aaf50b8","value":"3"},{"name":"暂不确定，需要考虑","id":"e09c4afa023a456c91a3e18a6db433c2","value":"4"},{"name":"暂不方便","id":"140faa5d3bf84c1a81162b9f15fbfa52","value":"5"}]},{"name":"拒绝","id":"3","taskResult":[{"name":"药品价格","id":"5dc59975fcfd11e7a57b448a5b739f91","value":"2"},{"name":"药品不全","id":"983c2d34fcfd11e7a57b448a5b739f91","value":"3"},{"name":"有余药","id":"b31d5baafcfd11e7a57b448a5b739f91","value":"5"},{"name":"患者过世","id":"c5cbbbfcfcfd11e7a57b448a5b739f91","value":"4"},{"name":"无理由","id":"d565ba8bfcfd11e7a57b448a5b739f91","value":"6"},{"name":"医保/门慢问题","id":"e6085ff0fcfd11e7a57b448a5b739f91","value":"7"},{"name":"流程复杂","id":"7957aadcfcfe11e7a57b448a5b739f91","value":"16"},{"name":"地址原因","id":"0d9ae6c2fcfe11e7a57b448a5b739f91","value":"9"},{"name":"配送原因","id":"aa1b75c1fcfe11e7a57b448a5b739f91","value":"15"},{"name":"万户服务问题","id":"1b90fd22fcfe11e7a57b448a5b739f91","value":"10"},{"name":"院内服务问题","id":"382f56c3fcfe11e7a57b448a5b739f91","value":"11"},{"name":"其他","id":"45759e68fcfe11e7a57b448a5b739f91","value":"13"}
         */
        // val  {name: "通话中", id: "04e3b64b4dd540f8a588bb24ed02e9b4", value: "6"}
        // 本人接听，直接挂断，通话中
        if(val.value === '3' || val.value === '4' || val.value === '6'){
            this.setState({
                isShowFinishBtn:false
            })
        }else if(val.value === '1' || val.value ==='2'){
            // 无人接听或亲友接听，且延期
            let dealStatus = this.form.getFieldValue('dealStatus')
            console.log('dealStatus:',dealStatus)
            if(dealStatus && dealStatus.id === '2'){
                this.setState({
                    isShowFinishBtn:false,
                    isShowCloseBtn:false,
                    delayBtnText:'保存'
                })
            }
        }



        const allowDeal = val && val.allowDeal;
        if (!allowDeal) {
            if (this.form.getFieldValue('delayTime') || this.form.getFieldError('delayTime')) {
                this.form.resetFields(['delayTime']);
            }
        }
        this.form.resetFields(['messageTemplate']);
        this.props.handleGetMessageTemplate(this.props.patientId, { taskType: Number(this.props.taskType), answerStatus: Number(val.value) })
    }



    disabledPreviousDays = (date) => {
        return Today.isAfter(date);
    }

    transfer = () => {
        this.props.onTransfer();
    }

    changeDealStatus= (val)=>{
        this.form.resetFields(['resultStatus', 'delayTime'])
        let answerValue = this.form.getFieldValue('answerStatus')
        if(answerValue && (answerValue.value === '1' || answerValue.value === '2') && val.id === '2'){
            this.setState({
                isShowFinishBtn:false,
                isShowCloseBtn:false,
                delayBtnText:'保存'
            })
        }else{
            this.setState({
                isShowFinishBtn:true,
                isShowCloseBtn:true,
                delayBtnText:'延后处理'
            })
        }
    }

    render() {
        const SelectSingleTaskAnswerStatus = selectSingleTaskAnswerStatusForTaskType(this.props.taskType);
        const SelectSingleTaskDealStatus = selectSingleTaskDealStatusForTaskType(this.props.taskType);
        let cols = 8;
        const formData = this.props.operateData || {};
        const answerStatus = formData.answerStatus && formData.answerStatus.value || {};
        const needDeal = answerStatus.allowDeal;
        const showDeal = needDeal && !answerStatus.hideDeal;
        if (showDeal) cols += 4;
        if (this.props.messageTemplateData && this.props.messageTemplateData.length) cols += 4;
        const dealStatus = formData.dealStatus && formData.dealStatus.value || {};
        let resultEditor = needDeal && dealStatus.taskResultType;
        if (resultEditor === 'choice' || resultEditor === 'addOrder') {
            cols += 4;
        } else if (resultEditor === 'delayNoReason') {
            cols += 4;
            if (this.props.delayTime) {
                cols += 4;
            }
        } else if (resultEditor === 'delay') {
            cols += 8;
            if (this.props.delayTime) {
                cols += 4;
            }
        }
        const dealFilter = this.props.delayDisabled ?
            (deal => deal.taskResultType !== 'delay' && deal.taskResultType !== 'delayNoReason') :
            null;

        return <div className="task-operate-bar">
            <Form def={formDef} data={this.props.operateData} onFieldsChange={this.props.onOperateDataChange} formRef={form=>this.form = form}>
                <Row gutter={10} style={{marginBottom:10}}>
                    <Col span={4}>
                        <Form.Item field="answerStatus" height="auto" onChange={this.changeAnswerStatus}>
                            <SelectSingleTaskAnswerStatus placeholder="选择接听状态"
                                getPopupContainer={closest(hasClass('task-operate-bar'))}
                                dropdownAlign={Alignment}
                                />
                        </Form.Item>
                    </Col>
                    {
                        this.props.messageTemplateData && this.props.messageTemplateData.length > 0 ? (
                            <Col span={4}>
                                <Form.Item field="messageTemplate" height="auto">
                                    <Select
                                        placeholder="选择短信发送模板" getPopupContainer={closest(hasClass('task-operate-bar'))}
                                        dropdownAlign={Alignment}
                                        >
                                        {
                                            this.props.messageTemplateData && this.props.messageTemplateData.map(result =>
                                            <Select.Option key={result.id} value={result.id}>{result.content}</Select.Option>)
                                        }
                                    </Select>
                                </Form.Item>
                            </Col>
                        ) : null
                    }
                    <Col span={4} style={{display: showDeal ? undefined : 'none'}}>
                        <Form.Item field="dealStatus" height="auto" onChange={this.changeDealStatus} >
                            <SelectSingleTaskDealStatus nonNull filter={dealFilter} placeholder="选择处理状态"
                                getPopupContainer={closest(hasClass('task-operate-bar'))}
                                dropdownAlign={Alignment}
                                />
                        </Form.Item>
                    </Col>
                    <Col span={4} style={{display: resultEditor === 'addOrder' ? undefined : 'none'}}>
                        <Button style={{width:'100%'}} type="primary" onClick={this.props.onNewOrder}>登记用药</Button>
                    </Col>
                    <Col span={4} style={{display: (resultEditor === 'choice' || resultEditor === 'delay') ? undefined : 'none'}}>
                        <Form.Item field="resultStatus" height="auto">
                            <Select
                                placeholder={resultEditor === 'choice' ? "选择处理结果" : "选择延期原因"} getPopupContainer={closest(hasClass('task-operate-bar'))}
                                dropdownAlign={Alignment}
                                >
                                {
                                    dealStatus.taskResult && dealStatus.taskResult.map(result =>
                                    <Select.Option key={result.id} value={result.value}>{result.name}</Select.Option>)
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={4} style={{display: (resultEditor === 'delay' || resultEditor === 'delayNoReason') && !this.props.delayTime ? undefined : 'none'}}>
                        <Form.Item field="delayTime" height="auto">
                            <DatePicker style={{width:'100%'}} placeholder="选择延期时间" disabledDate={this.disabledPreviousDays}
                                getCalendarContainer={closest(hasClass('task-operate-bar'))}
                                placement="topLeft"
                            />
                        </Form.Item>
                    </Col>
                    {
                        (resultEditor === 'delay' || resultEditor === 'delayNoReason') && this.props.delayTime ?
                        <Col span={8}>
                            <span style={{color:'white',lineHeight:'32px'}}>最终回收日期：{ this.props.delayTime.format('YYYY-MM-DD dddd') }</span>
                        </Col> : null
                    }
                    <Col span={24 - cols}></Col>
                    <Col span={4}>
                        {
                            this.state.isShowFinishBtn ? (
                                <Dropdown.Button className="opbutton" type="primary"
                                    onClick={this.completeTask} trigger={['click']}
                                    overlay={<Menu onClick={this.completeTaskWithFreeze} selectedKeys={[]}>
                                        <Menu.Item key="1">完成并冻结本类任务</Menu.Item>
                                        <Menu.Item key="2">完成并冻结所有类型任务</Menu.Item>
                                    </Menu>}
                                    placement="topRight"
                                    getPopupContainer={closest(hasClass('task-operate-bar'))}
                                    >
                                    完成
                                </Dropdown.Button>
                            ) : null
                        }
                    </Col>
                </Row>
                <Row gutter={10}>
                    <Col span={12}>
                        <Form.Item field="remarks" height="auto">
                            <Input placeholder="备注：记录通话情况"/>
                        </Form.Item>
                    </Col>
                    <Col span={8}></Col>
                    <Col span={4}>
                        <Row className="oprow">
                            <Col span={8}>
                                <div className="oplink" onClick={this.delayTask}>{this.state.delayBtnText}</div>
                            </Col>
                            <Col span={8}>
                                <div className="oplink" onClick={this.transfer}>转移</div>
                            </Col>
                            {
                                this.state.isShowCloseBtn ? (
                                    <Col span={8}>
                                        <div className="oplink" onClick={this.closeTask}>关闭</div>
                                    </Col>
                                ) : null
                            }

                        </Row>
                    </Col>
                </Row>
            </Form>
        </div>
    }
}

class FreezeCheckBox extends Component {

    onCheckOne = (e) => {
        const checked = e.target.checked;
        this.props.onChange(checked ? 1 : undefined);
    }

    onCheckTwo = (e) => {
        const checked = e.target.checked;
        this.props.onChange(checked ? 2 : undefined);
    }

    render() {
        return <div style={{color:'white'}}>
            <Checkbox checked={this.props.value === 1} onChange={this.onCheckOne}>冻结本类任务</Checkbox>
            <Checkbox checked={this.props.value === 2} onChange={this.onCheckTwo}>冻结所有类型任务</Checkbox>
        </div>
    }
}
